<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- @input="handleinput" -->
        <hminput
          placeholder="请输入手机号"
          v-model="user.username"
          :rules="/^1[35789]\d{9}$/"
          msg="用户名或手机号码输入错误"
        ></hminput>
        <!-- <input placeholder="密码" class="input" type="password" /> -->
        <hminput
          placeholder="请输入密码"
          v-model="user.password"
          :rules="/^\S{3,16}$/"
          msg="请输入3-16位的密码"
        ></hminput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <!-- 这里的click不是单击事件，是组组件传递过来的监听事件 -->
      <hmbuttom type="primary" @click="login">
        <span>登录</span>
      </hmbuttom>
    </div>
  </div>
</template>

<script>
import { userLogin } from "@/apis/user.js";
import hmbuttom from "@/components/hmbuttom.vue";
import hminput from "@/components/hminput.vue";
export default {
  components: {
    hmbuttom,
    hminput,
  },
  data() {
    return {
      user: {
        username: "13612345670",
        password: "wjk_xxx",
      },
    };
  },
  methods: {
    // 登录
    login(e) {
      // 正则验证手机号码和密码
      if (
        /^admin$|^1[35789]\d{9}$/.test(this.user.username) &&
        /^\S{3,16}$/.test(this.user.password)
      ) {
        userLogin(this.user)
          .then((res) => {
            console.log(res);
            // 登录成功跳转到个人中心
            if (res.data.message == "登录成功") {
              // 登陆之前先村token
              localStorage.setItem("heimatoutiao_token", res.data.data.token);
              localStorage.setItem(
                "heimatoutiao_userid",
                res.data.data.user.id
              );
              this.$toast.success("登录成功");
              // this.$router.push({ path: `/personal/${res.data.data.user.id}` });
              // 跳转到个人中心页面
              // 跳转处理
              let redirect = location.href.split("=")[1];
              if (redirect) {
                // decodeURIComponent() -- 解码函数
                location.href = decodeURIComponent(redirect);
              } else {
                // 否则跳转到个人中心页
                this.$router.push({
                  path: `/personal/${res.data.data.user.id}`,
                });
              }
            } else {
              this.$toast.fail("登录失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 错误提示
        this.$toast({
          message: "手机号或密码输入不合法",
          position: "bottom",
          duration: 5000,
        });
      }
      // console.log(this.user);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}
.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    color: #3385ff;
  }
}
</style>